<div class="layuimini-container layuimini-page-anim">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>搜索信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">考点名称</label>
              <div class="layui-input-inline">
                <input type="text" name="username" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i
                      class="layui-icon"></i> 搜索
              </button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal data-add-btn layui-btn-sm" lay-event="add"> 添加计划</button>
        <!--<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>-->
      </div>
    </script>

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-sm data-count-edit" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-normal layui-btn-sm data-count-edit" lay-event="edit">详情</a>
      <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="delete">删除</a>
      <a class="layui-btn layui-btn-sm data-count-edit" lay-event="audit">审批申请</a>
    </script>

  </div>
</div>

<script>
  var tableData = [
    {
      'id': 10000,
      name: '淮南职业技术学院',
      type: '安管人员',
      date: '2021-10-08',
      state: '待审批'
    },
    {
      'id': 10000,
      name: '淮南职业技术学院',
      type: '安管人员',
      date: '2021-10-08',
      state: '待审批'
    },
    {
      'id': 10000,
      name: '淮南职业技术学院',
      type: '安管人员',
      date: '2021-10-08',
      state: '待审批'
    },
    {
      'id': 10000,
      name: '淮南职业技术学院',
      type: '安管人员',
      date: '2021-10-08',
      state: '待审批'
    }, {
      'id': 10000,
      name: '淮南职业技术学院',
      type: '安管人员',
      date: '2021-10-08',
      state: '待审批'
    }, {
      'id': 10000,
      name: '淮南职业技术学院',
      type: '安管人员',
      date: '2021-10-08',
      state: '待审批'
    }
  ]
  layui.use(['form', 'table', 'miniPage', 'element'], function () {
    var $ = layui.jquery,
      form = layui.form,
      table = layui.table,
      miniPage = layui.miniPage

    table.render({
      elem: '#currentTableId',
      // url: 'api/table.json',
      data: tableData,
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print'],
      cols: [[
        { field: 'id', title: '序号', sort: true },
        { field: 'name', title: '考试名称' },
        { field: 'type', title: '考试类别' },
        { field: 'date', title: '考试日期' },
        { field: 'state', title: '状态' },
        { title: '操作', minWidth: 280, toolbar: '#currentTableBar', align: 'center' }
      ]],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 5,
      page: true,
      // size: 'lg'
      // skin: 'nob'
    })

    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
      var result = JSON.stringify(data.field)
      layer.alert(result, {
        title: '最终的搜索信息'
      })

      //执行搜索重载
      table.reload('currentTableId', {
        page: {
          curr: 1
        }
        , where: {
          searchParams: result
        }
      }, 'data')

      return false
    })

    /**
     * toolbar事件监听
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
      if (obj.event === 'add') {   // 监听添加操作
        var content = miniPage.getHrefContent('/static/exam/page/exam/add_plan.html')
        var openWH = miniPage.getOpenWidthHeight()
        console.log(openWH)
        var index = layer.open({
          title: '添加计划',
          type: 1,
          shade: 0.2,
          maxmin: true,
          shadeClose: true,
          area: ['500px', '500px'],
          // offset: [openWH[2] + 'px', openWH[3] + 'px'],
          content: content,
        })
        $(window).on('resize', function () {
          layer.full(index)
        })
      }
    })

    // 编辑
    table.on('tool(currentTableFilter)', function (obj) {
      var data = obj.data
      if (obj.event === 'edit') {

        var content = miniPage.getHrefContent('/static/exam/page/exam/add_plan.html')
        var openWH = miniPage.getOpenWidthHeight()

        var index = layer.open({
          title: '编辑用户',
          type: 1,
          shade: 0.2,
          maxmin: true,
          shadeClose: true,
          area: ['500px', '500px'],
          content: content,
        })
        $(window).on('resize', function () {
          layer.full(index)
        })
        return false
      } else if (obj.event === 'delete') {
        layer.confirm('真的删除行么', function (index) {
          obj.del()
          layer.close(index)
        })
      } else if (obj.event === 'audit') {
        layer.confirm('确认提交审批？', function (index) {

          layer.close(index)
        })
      }
    })

  })
</script>
